<template>
    <footer>
      <div class="footer-content">
        <div class="footer-section">
          <h3>联系我们</h3>
          <p>反馈邮箱: {{ data.contact.email }}</p>
        </div>
        <div class="footer-section">
          <h3>相关链接</h3>
          <ul>
            <template v-for="link in data.links">
              <li>
                <a :href="link.url" target="_blank">{{ link.label }}</a>
              </li>
            </template>
          </ul>
        </div>
        <div class="footer-section">
          <p>{{ data.copyright }}</p>
        </div>
      </div>
    </footer>
  </template>
  
  <script setup lang="ts">
  import footerData from '@/config/footer.json'

  const data = footerData;

  </script>
  
  <style scoped>
  footer {
    flex-shrink: 0;
    background-color: #333;
    color: white;
    padding: 2rem 0;
    width: 100%;
  }
  
  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .footer-section {
    flex: 1;
    min-width: 200px;
  }
  
  .footer-section h4 {
    margin-top: 0;
  }
  
  .footer-section ul {
    list-style: none;
    padding: 0;
  }
  
  .footer-section ul li {
    margin: 0.5rem 0;
  }
  
  .footer-section ul li a {
    color: white;
    text-decoration: none;
  }
  
  .footer-section ul li a:hover {
    text-decoration: underline;
  }
  </style>
  